import React, {Component} from 'react';

export default class State extends Component {
    // 在组件内部定义状态，有两种方案; 第一种：属性，第二种：构造函数
    // 1.state属性
    state = {
        isShow: true,
        count: 0,
        list: ['a','b','c']
    }

    // 2.构造函数(推荐)
    // constructor(props) {
    //     // 调用父类构造函数
    //     super(props);
    //
    //     this.state = {
    //         isShow: true
    //     }
    // }

    render() {
        return (
            <div>
                {
                    // this.state.isShow ? <div>state</div> : null
                    this.state.isShow && <div>state {this.state.count}</div>  // 与上面实现的功能一致
                }
                <ul>
                    {
                        this.state.list.map(value => {
                            return(
                                <li key={value}>{value}</li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }

    componentDidMount() {
        // setTimeout(() => {
            // this.state.isShow = !this.state.isShow
            // this.setState({})

            // 知识点1：不依赖于原值
            // this.setState({
            //     isShow: false
            // })

            // 知识点2：依赖于原值
            // this.setState(prevState => {
            //     return{
            //         isShow: !prevState.isShow   // 保证在下一次事件循环的时候,在拿到新值的时候再去更新，这样 isShow 就不会出现逻辑上的问题
            //     }
            // })
        // },3000)

        // 知识点3：setState 可以传入第二个函数，相当于回调；该回调是在DOM渲染完后才执行
        // this.setState(prevState => {
        //     return{
        //         count: prevState.count + 1
        //     }
        // },()=>{
        //     console.log(document.querySelector("#root").innerHTML)  // count为1
        // })
        // console.log(document.querySelector("#root").innerHTML)   // count为0


        this.state.list.push("d")
        this.setState({})
        // this.forceUpdate()
    }
}